<template>
  <div id="echarts1"> 
   
   <div class="con">
         <div class="top">
             <div class="top_item" style="flex: 1;">
                 <img class="top_img" src="@/assets/images/echarts_tb5.png" />
                  日活数据
             </div>
              <div class="top_item" >
                 <div class="see_but" @click="go_but()">查看详情</div>
             </div>
           
         </div>
         <div class="box">
               <div class="top_item" style="justify-content: flex-end;">
                 <div class="top_item_but" :class="select_id==1 ? 'active1' : ''" @click="select_but(1)">当月</div>
                 <div class="top_item_but" :class="select_id==2 ? 'active1' : ''"  @click="select_but(2)">当周</div>
               </div>
               <div id="main3" style="width:100%;height:300px;"></div>

         </div>
   </div>

</div>
</template>

<script>

export default {
   name: 'echarts1',
  data () {
    return {
        select_id:2,
        type:2,  //type  1-当月  2-当周
        x_data:[],
        y_data:[],
        month:[],
        monthdata:[],
        week:['周一','周二','周三','周四','周五','周六','周天'],
        weekdata:[],
    }
  },
   components:{

  },
  created(){
    // this.x_data = this.month
    // this.y_data = this.monthdata
     this.x_data = this.week
    this.y_data = this.weekdata 
    this.list_fun()   
      
  },
  mounted (){
    this.mGetDate()
  },
  methods: {
    list_fun(){
    
         this.post("/whole/dailyLife", {
             type:this.type
	        }).then(res => {
              
              for(let item of res.message) {
                    if(this.type == 1){
                          this.monthdata.push(item.num) 
                    }else if(this.type == 2){
                          this.weekdata.push(item.num) 
                    }
              }

              this.myEcharts();

              //console.log(res)
         })
    },
    select_but(index){
         this.select_id = index
         if(index == 1){
            this.type = 1
            this.monthdata = []
            this.x_data = this.month
            this.y_data = this.monthdata
            this.list_fun()     
         }else if(index == 2){
            this.type = 2
            this.weekdata = []
            this.x_data = this.week
            this.y_data = this.weekdata
            this.list_fun()     
        }
    },
     mGetDate(){  //获取当月天数
       var now=new Date();
       var d = new Date(now.getFullYear(),now.getMonth()+1,0);
       var days=d.getDate();
       for(let i=1 ; i<=days;i++){
            this.month.push(i)
       }
       
    },
 
    myEcharts(){
         let than = this
		  // 基于准备好的dom，初始化echarts实例
		  var myChart = this.$echarts.init(document.getElementById('main3'));

		  // 指定图表的配置项和数据
		  var option = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#FD4163'
                            }
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: than.x_data
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [           
                        {
                            name: '日活数',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: '#F9E5EA' //改变区域颜色
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#FD4163', //改变折线点的颜色
                                    lineStyle: {
                                        color: '#FD4163' //改变折线颜色
                                    }
                                }
			                },
                            data: than.y_data
                        }
                    ]
		  };

		  // 使用刚指定的配置项和数据显示图表。
		   myChart.setOption(option);
		  },
          go_but(){
            this.$router.push({
                path: '/index/operationdata/population/detailsEcharts3',
                query: {
                    name:'日活数据详情',
                }
            })
          }


  }
}
</script>


<style scoped>
.con{
   padding:15px;
}
.top{
    display: flex;
}
.top_item{
    
    display: flex;
    align-items: center;
}
.top_img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
.top_item_but{
    margin-left: 10px;
    height: 28px;
    line-height: 28px;
    width: 60px;
    text-align: center;
    font-size: 12px;
    border-radius:3px;
    color:#FD4163;   
    background: #F9E5EA; 
    box-shadow: 0px 4px 9px 0px rgba(254, 77, 102, 0.1);
}
.active1{
    background: #FD4163;
    color:white;
}
.box{
    padding: 10px;
    border-radius: 10px;  
    box-shadow: 0px 4px 9px 0px rgba(254, 77, 102, 0.1);
    margin-top: 20px;
}
.see_but{
    width: 90px;
    height: 30px;
    background: #B3C0D1;
    border-radius: 18px;
    text-align: center;
    line-height: 30px;
    color:white;
    font-size: 14px;
    cursor: pointer;
}
</style>